<template>
    <div :class="{ headerBox: true }" id="registerBox">
        <h3 :class="{ title: true }">注册</h3>
        <!-- 输入界面 -->
        <div :class="{ inputStyle: true }">
            账号:<el-input
                v-model="account"
                placeholder="请输入账号"
                @change="inspect"
            ></el-input>
        </div>
        <div :class="{ inputStyle: true }">
            密码:<el-input
                v-model="password"
                placeholder="请输入密码"
            ></el-input>
        </div>
        <div :class="{ inputStyle: true }">
            手机:<el-input
                v-model="phone"
                placeholder="请输入电话号码"
            ></el-input>
        </div>
        <!-- 单选框区域 -->
        <div :class="{ radioSet: true }">
            <el-radio v-model="radio" label="admins">管理员</el-radio>
            <el-radio v-model="radio" label="lessors">出租方</el-radio>
        </div>
        <!-- 按钮 -->
        <div :class="{ buttonStyle: true }">
            <el-button round @click="sendData" :disabled="access"
                >注册</el-button
            >
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapActions: registerMapActions,
    mapState: registerMapState,
} = createNamespacedHelpers("register"); //主仓库引入子仓库的名称,
export default {
    data() {
        return {
            account: "",
            password: "",
            radio: "admins",
            phone: "",
        };
    },
    methods: {
        ...registerMapActions(["isAccess", "register"]),
        //检查账号数据是否存在
        inspect() {
            this.isAccess({ account: this.account, radio: this.radio });
        },
        //注册,发送数据
        sendData() {
            this.register({
                account: this.account,
                password: this.password,
                phone: this.phone,
                radio: this.radio,
            });
            alert("注册成功");
            this.$router.push("/login");
        },
    },
    computed: {
        ...registerMapState(["access"]),
    },
};
</script>
    
<style lang="scss">
body,
html {
    overflow: hidden;
}
#registerBox {
    margin-top: 150px;
}
/* 登录框布局 */
.headerBox {
    width: 400px;
    margin: 0 auto;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    background-color: #eeeeee;
}
.headerBox * {
    margin: 5px;
}
/* 标题 */
.title {
    text-align: center;
}
/* 输入框样式 */
.inputStyle {
    width: 250px;
    margin: 0 auto;
}
/* 单选框设置 */
.radioSet {
    text-align: center;
}
/* 按钮样式 */
.buttonStyle {
    text-align: center;
}
</style>